<template>
  <div class="detail">
    <div class="img">
      <img :src="detailInfo.poster" />
    </div>
    <div class="mvInfo">
      <div class="title">
        <div>
          {{ detailInfo.name }}<span class="mv-type">{{ "2D" }}</span>
        </div>
        <span class="score"
          ><i>{{ detailInfo.grade }}</i
          >分</span
        >
      </div>
      <div>{{ detailInfo.category }}</div>
      <div>{{ detailInfo.premiereAt | formatTime }}上映</div>
      <div>{{ detailInfo.nation }} | {{ detailInfo.runtime }} 分钟</div>
      <div class="intro">
        {{ detailInfo.synopsis }}
      </div>
    </div>
    <div class="mv-actors">
      <h3>演职人员</h3>
      <ul class="actor">
        <li v-for="(item, index) in actors" :key="'actor' + index">
          <img
            :src="item.avatarAddress"
            width="100%"
            height="100%"
            alt="演员图片"
          />
          <div class="actor-nam">{{ item.name }}</div>
          <div class="actor-role">{{ item.role }}</div>
        </li>
      </ul>
    </div>
    <div class="photos">
      <div class="photo-title">
        <p>剧照</p>
        <p class="all">全部({{ photos.length }})</p>
      </div>
      <div class="pic">
        <div
          class="img"
          v-for="(item, index) in photos"
          :key="'pic' + index"
          alt="剧照"
        >
          <img :src="item" v-lazy="item" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
moment.locale("zh-cn");
export default {
  data() {
    return {
      // 电影的详情数据
      detailInfo: {},
      // 演员的列表
      actors: [],
      // 剧照的列表
      photos: [],
    };
  },
  async created() {
    // 将底部导航栏设置为不显示
    this.$store.state.footShow = false;
    // 获取当前传递过来的id
    const id = this.$route.params.filmId;
    const res = await this.$axios(`/seatSell/filmInfo/${id}`);
    console.log(res);
    this.detailInfo = res.data;
    this.actors = res.data.actors;
    this.photos = res.data.photos;
  },
  filters: {
    formatTime(time) {
      return moment(time).format("dddd");
    },
  },

  beforeDestroy() {
    // 销毁之前将底部导航栏设置为显示
    this.$store.state.footShow = true;
  },
};
</script>

<style lang="scss" scoped>
.detail {
  padding: 2vh;
  padding-bottom: 40px;
  .img {
    width: 100%;
    // height: 220px;
    margin-bottom: 30px;

    img {
      width: 100%;
      height: 100%;
    }
  }
  .mvInfo {
    color: #797d82;
    font-size: 13px;
    .title {
      display: flex;
      color: #191a1b;
      height: 24px;
      line-height: 24px;
      font-size: 18px;
      justify-content: space-between;
      margin-bottom: 4px;
      .mv-type {
        margin-left: 4px;
        color: #fff;
        font-size: 10px;
        background-color: #d2d6dc;
        border-radius: 2px;
      }
      .score {
        color: orange;
        i {
          margin-left: 2px;
        }
      }
    }
    .intro {
      height: 38px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    div {
      margin-bottom: 4px;
    }
  }
  .mv-actors {
    .actor {
      display: flex;
      justify-content: space-between;
      li {
        font-size: 12px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 20vw;
        height: 30vw;
        overflow: hidden;
        .actor-name {
          color: #191a1b;
        }
        .actor-row {
          font-size: 10px;
        }
        img {
          width: 16vw;
          height: 100%;
        }
      }
    }
  }
  .photos {
    .photo-title {
      display: flex;
      justify-content: space-between;
      margin: 8px 0;
      color: #191a1b;
      font-size: 16px;
      .all {
        font-size: 13px;
        color: #797d82;
      }
    }
    .pic {
      display: flex;
      overflow: hidden;
      margin-bottom: 26px;
      .img {
        width: 38vw;
        height: 26vw;
        margin: 4px 10px;
        img {
          width: 38vw;
          height: 26vw;
        }
      }
    }
  }
}
</style>